<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest上传文件进度实现</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/util.js"></script>
<script src="js/jquery-form.js"></script>
<script type="text/javascript">
	var xhr;
	var ot;//
	var oloaded;
	//上传文件方法
	function UpladFile() {
		var fileObj = document.getElementById("file").files[0]; // js 获取文件对象

		var form = new FormData(); // FormData 对象
		form.append("file", fileObj); // 文件对象

		xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
		xhr.open("post",  "http://localhost/base/uploadFile", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
		xhr.timeout = 3000 //超时设置
		xhr.ontimeout = function() {
			alert("上传超时")
		}
		xhr.onload = uploadComplete; //请求完成
		xhr.onerror = uploadFailed; //请求失败
		xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
		xhr.upload.onloadstart = function() {//上传开始执行方法
			ot = new Date().getTime(); //设置上传开始时间
			oloaded = 0;//设置上传开始时，以上传的文件大小为0
		};

		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				/*var data = JSON.parse(xhr.responseText)
				var service = data.obj[0].service
				var path = data.obj[0].path
				$.ajax({
					url : jypath + "/CxCar/getMeaId",
					type : 'POST',
					dataType : "json",
					data : {
						"path" : path
					},
					success : function(data) {

					}
				})*/
			}
		}
		xhr.send(form); //开始上传，发送form数据
	}

	//上传进度实现方法，上传过程中会频繁调用该方法
	function progressFunction(evt) {
		var progressBar = document.getElementById("progressBar");
		var percentageDiv = document.getElementById("percentage");
		// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
		if (evt.lengthComputable) {//
			progressBar.max = evt.total;
			progressBar.value = evt.loaded;
			percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)
					+ "%";
		}

		var time = document.getElementById("time");
		var nt = new Date().getTime();//获取当前时间
		var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
		ot = new Date().getTime(); //重新赋值时间，用于下次计算

		var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b       
		oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

		//上传速度计算
		var speed = perload / pertime;//单位b/s
		var bspeed = speed;
		var units = 'b/s';//单位名称
		if (speed / 1024 > 1) {
			speed = speed / 1024;
			units = 'k/s';
		}
		if (speed / 1024 > 1) {
			speed = speed / 1024;
			units = 'M/s';
		}
		speed = speed.toFixed(1);
		//剩余时间
		var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
		time.innerHTML = '，速度：' + speed + units + '，剩余时间：' + resttime + 's';
		if (bspeed == 0)
			time.innerHTML = '上传已取消';
	}
	//上传成功响应
	function uploadComplete(evt) {
		//服务断接收完文件返回的结果
		// alert(evt.target.responseText);
	}
	//上传失败
	function uploadFailed(evt) {
		alert("上传失败！");
	}
	//取消上传
	function cancleUploadFile() {
		xhr.abort();
	}
	//获取ticket
	var getTicket = function() {
		var expire_seconds = document.getElementById("expire_seconds").value
		var sceneId = document.getElementById("sceneId").value
		var formdata = new FormData();
		formdata.append("expire_seconds", expire_seconds)
		formdata.append("sceneId", sceneId)
		$.ajax({
			url : jypath + "/CxCar/getTicket",
			type : "post",
			dataType : "json",
			data : formdata,
			processData : false,
			contentType : false,
			success : function(data) {
				console.log(data)
			}

		})
	}
	//判断照片大小
	function getPhotoSize(obj){
	  photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
	  if(photoExt!='.jpg'||photoExt!='.PNG'||photoExt!='.JPEG'){
	    alert("请上传后缀名为jpg PNG JPEG的照片!");
	    return false;
	  }
	  var fileSize = 0;
	  var isIE = /msie/i.test(navigator.userAgent) && !window.opera;      
	  if (isIE && !obj.files) {     
	     var filePath = obj.value;      
	     var fileSystem = new ActiveXObject("Scripting.FileSystemObject");  
	     var file = fileSystem.GetFile (filePath);        
	     fileSize = file.Size;     
	  }else { 
	     fileSize = obj.files[0].size;   
	  } 
	  fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
	  console.log("size:"+fileSize)
	  if(fileSize>=200){
	    alert("照片最大尺寸为200KB，请重新上传!");
	    return false;
	  }
	}
	var uploadimg = function() {
		var img = new FormData($("#upload1")[0]);
		$.ajax({
			url : jypath + "/web/getMeaId",
			type : "post",
			dataType : "json",
			data : img,
			processData : false,
			contentType : false,
			success : function(data) {
				console.log(data)
			}
		})
	}
</script>
</head>
<body>
	<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
	<span id="percentage"></span>
	<span id="time"></span>
	<br />
	<br />
	<input type="file" id="file" name="myfile" />
	<input type="button" onclick="UpladFile()" value="上传" />
	<input type="button" onclick="cancleUploadFile()" value="取消" />
	<hr />
	<div>
		获取ticket <br /> 二维码有效期:
		<form id="form">
			<input id="expire_seconds" type="number" max="2592000"
				name="expire_seconds" /> 二维码类型: <input id="sceneId" name="sceneId" />
			<input type="button" onclick="getTicket()" value="提交" />
		</form>
	</div>
	<form id="upload1" enctype="multipart/form-data">
		<input type="file" name="file"  onchange="getPhotoSize(this)"/>
		<input type="text" name="index" />
		<input type="button" onclick="uploadimg()" value="提交" />
	</form>
</body>
</html>